<template>
    <div class="modal" >
        <u-modal  @confirm="confirm" @cancel="cancel" class="u-border-top" v-model="modalShow"
            :content-style="contentStyle" :show-cancel-button="true" :show-title="false" :content="content"
            :confirm-style="confirmStyle" :cancel-text="cancelText" :confirm-text="confirmText"
            :cancel-style="cancelStyle" >


            <view class="slot-content">
                <rich-text :nodes="slotContent"></rich-text>
            </view>
        </u-modal>
    </div>
</template>

<script>
export default {
    name: "Modal",
    props: {
        content: {
            type: String,
            defalut: "",
        },
        // 确定按钮文字
        confirmText: {
            type: String,
            default: "确认",
        },
        // 取消按钮文字
        cancelText: {
            type: String,
            default: "取消",
        },
        // 取消按钮文字
        modalShow: {
            type: Boolean,
            default: false
        },
        contentStyle: {
            type: Object,
            default: () => {
                return {
                    color: "#232323",
                    fontSzie: "30rpx",
                    fontWeight: "bold",
                    marginTop: "40rpx ",
                }
            }
        },
        //插槽内容
        slotContent: {
            type: String,
            default: ''
        }
    },
    data() {
        return {


            // 确定按钮样式
            confirmStyle: {
                width: "200rpx",
                height: "68rpx",
                background: "#0089ff",
                color: "#ffffff",
                margin: "30rpx",
                borderRadius: "8rpx",
                lineHeight: "68rpx",
                fontSize: "28rpx",
            },
            // 取消按钮样式
            cancelStyle: {
                width: "200rpx",
                height: "68rpx",
                border: "2rpx solid #0089ff",
                borderRadius: "8rpx",
                color: "#0089ff",
                margin: "30rpx",
                borderRadius: "8rpx",
                lineHeight: "68rpx",
                fontSize: "28rpx",
            },

        };
    },
    methods: {
        open() {
            this.modalShow = true;
        },
        confirm() {
            this.modalShow = false;
            this.$emit('determine')
        },
        cancel() {
            this.modalShow = false
        }
    },
};
</script>

<style lang="scss" scoped>
::v-deep .u-model__footer {
    border-top-width: none;
    padding: 0 50rpx 32rpx;
}

::v-deep .u-border-top::after {
    border-top: none;
}
</style>
